<script>
import request from "@/utils/request"
import { handleUrlParams } from "@/utils"
import uniTransition from "@/uni_modules/uni-transition/components/uni-transition/uni-transition.vue"
import dragIcon from "./drag.png"

export default {
  name: "notificationInfo",
  components: { uniTransition },
  data() {
    return {
      item: {
        appid: "",
        createTime: "",
        id: "",
        isRead: false,
        jumpPath: "",
        jumpType: null,
        messageContent: "",
        messageTitle: "",
        publishStatus: "",
        publishTime: null,
      },
      hasData: false, // 是否有需要通知的通知
      startX: 0, // 记录触摸开始的位置
      moveX: 0, // 记录滑动过程中的位置
      hasRead: false, // 是否已读
      unreadMessageCount: 0, // 未读消息数量
      dragIcon,
    }
  },
  onPageShow() {
    request({
      url: "notificationInfo/page",
      errorHandle: true,
      data: {
        current: 1,
        size: 1,
        isRead: false,
      },
    }).then((data) => {
      this.unreadMessageCount = data.total
      this.$emit("unreadMessageCount", this.unreadMessageCount)
      //初始化变量
      this.hasRead = false
      this.moveX = 0
      this.startX = 0
      //如果有未读消息，则展示
      if (data.records && data.records.length > 0 && data.records[0].isRead === false) {
        this.item = data.records[0]
        this.hasData = true
        //停留超过10s，自动关闭
        setTimeout(() => {
					this.hasRead = true
        }, 10000)
      } else {
        this.hasData = false
      }
    })
  },
  methods: {
    touchStart(e) {
      this.startX = e.touches[0].pageX // 记录触摸开始的水平位置
    },
    touchMove(e) {
      this.moveX = e.touches[0].pageX - this.startX // 记录滑动过程中的水平位置
    },
    touchEnd() {
      // 如果滑动的距离大于一定的值（例如100px），则清除通知
      if (this.moveX > 100 || this.moveX < -100) {
        this.markAsRead()
      } else {
        this.moveX = 0
        this.startX = 0
      }
    },
    //通知点击
    notificationClick() {
      this.markAsRead()
      switch (this.item.jumpType) {
        //跳转到别的小程序
        case "Applet":
          uni.navigateToMiniProgram({
            appId: this.item.appid,
            path: this.item.jumpPath,
          })
          break
        // 站内页面
        case "Instation":
          uni.navigateTo({
            url: this.item.jumpPath,
          })
          uni.switchTab({
            url: this.item.jumpPath,
          })
          break
        //跳h5页面
        case "H5":
          uni.navigateTo({
            url: handleUrlParams("/pages/web-view/web-view", {
              path: encodeURIComponent(this.item.jumpPath),
            }),
          })
      }
    },
    //将通知标记为已读
    markAsRead() {
      this.hasRead = true
      request({
        url: "notificationInfo/updateIsRead",
        data: {
          id: this.item.id,
        },
        errorHandle: true,
      }).then(() => {
        this.unreadMessageCount--
        this.$emit("unreadMessageCount", this.unreadMessageCount)
      })
    },
  },
  emits: ["unreadMessageCount"],
}
</script>

<template>
  <view class="component">
    <uniTransition
      class="notification-banner"
      id="notification-banner"
      :show="!hasRead && hasData"
      :style="'--moveX:' + moveX + 'px'"
      :mode-class="!hasRead ? 'slide-top' : 'fade'"
    >
      <view class="container" @touchstart="touchStart" @touchmove.stop="touchMove" @touchend="touchEnd" @tap.stop="notificationClick">
        <view class="title">{{ item.messageTitle }}</view>
        <view class="content" v-if="item.messageContent">{{ item.messageContent }}</view>
        <!--        <view class="footer">-->
        <!--          <image :src="dragIcon" class="icon"></image>-->
        <!--        </view>-->
      </view>
    </uniTransition>
  </view>
</template>

<style scoped lang="scss">
.component {
  .notification-banner {
    position: fixed;
    top: 20rpx;
    left: calc(20rpx + var(--moveX));
    width: calc(100vw - 40rpx);
    box-sizing: border-box;
    z-index: 99;
    .container {
      padding: {
        top: 20rpx;
        right: 30rpx;
        left: 30rpx;
        bottom: 20rpx;
      }
			backdrop-filter: blur(10px);
			background-color: rgba(255, 255, 255, 0.6);
      box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.3);
      border-radius: 20rpx;
      .title {
        font-size: 34rpx;
        font-weight: bold;
        color: var(--text-color);
        //文本溢出自动加省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .content {
        font-size: 30rpx;
        margin-top: 12rpx;
        color: var(--text-color-light);
				//文本溢出自动加省略号
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
      .footer {
        padding: 8rpx 0;
        display: flex;
        justify-content: center;
        .icon {
          width: 25rpx;
          height: 25rpx;
        }
      }
    }
  }
}
</style>
